<template >
  <div>
    <el-button type="primary" @click="addmenu">添加菜单</el-button>
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="menuName"
      border
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="menuName" label="菜单名称" sortable width="180">
      </el-table-column>
      <el-table-column prop="menuTypes" label="菜单类型" sortable width="180">
        <template slot-scope="scope">
          {{ text(scope) }}
        </template>
      </el-table-column>
      <el-table-column prop="menuRoute" label="菜单路由" sortable width="180">
      </el-table-column>
      <el-table-column prop="component" label="组件路径" sortable width="180">
      </el-table-column>
      <el-table-column prop="redirect" label="重定向" sortable width="180">
      </el-table-column>
      <el-table-column prop="icon" label="菜单图标" sortable width="180">
        <template slot-scope="scope">
          <e-icon-picker v-model="scope.row.icon" />
        </template>
      </el-table-column>
      <el-table-column prop="routeName" label="路由名称" sortable width="180">
      </el-table-column>
      <el-table-column prop="menuAPI" label="Api接口" sortable width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.menuId)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.menuId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="添加菜单信息" :visible.sync="dialogFormVisible">
      <menu-add-view ref="PostMenu"></menu-add-view>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="Tree">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改菜单信息" :visible.sync="dialogFormVisible1">
      <menu-edit-view :id="ids" ref="EditMenu"></menu-edit-view>
      <div slot="footer" class="dialog-footer">
        <el-button @click="quanxiao">取 消</el-button>
        <el-button type="primary" @click="Trees">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import MenuAddView from "./MenuAddView.vue";
import MenuEditView from "./MenuEditView.vue";
import { GetMenu } from "@/api/admin";
import { DelMenu } from "@/api/admin";
export default {
  components: {
    MenuAddView,
    MenuEditView,
  },
  data() {
    return {
      tableData: [],
      menulist: [],
      dialogFormVisible: false,
      dialogFormVisible1: false,
      menuTypeslist: [
        {
          id: 1,
          name: "目录",
        },
        {
          id: 2,
          name: "菜单",
        },
        {
          id: 3,
          name: "按钮",
        },
      ],
      ids: 0,
    };
  },
  methods: {
    //显示方法
    GetMenus() {
      GetMenu().then((res) => {
        this.tableData = res.data;
      });
    },
    addmenu() {
      this.dialogFormVisible = true;
    },
    Tree() {
      this.$refs.PostMenu.submitForm("ruleForm");
    },
    text(scope) {
      if (scope.row.menuTypes == 1) {
        return "目录";
      } else if (scope.row.menuTypes == 2) {
        return "菜单";
      } else {
        return "按钮";
      }
    },
    handleEdit(id) {
      this.ids = id;
      window.sessionStorage.setItem("id", JSON.stringify(id));
      this.dialogFormVisible1 = true;
    },
    quanxiao() {
      window.sessionStorage.setItem("id", null);
      this.dialogFormVisible1 = false;
    },
    handleDelete(id) {
      DelMenu(id).then((res) => {
        if (res.data) {
          this.$message.success("删除成功");
          this.GetMenus();
        }
      });
    },
    EditMenu() {},
    Trees() {
      this.$refs.EditMenu.submitForms("ruleForm");
    },
  },
  created() {
    this.GetMenus();
  },
};
</script>
<style >
</style>